<template>
  <div class="bottom-charts">
    <!--性别-->
    <div class="bc-chart-item">
      <div class="bcci-header">性别分布</div>
      <dv-active-ring-chart :config="config1" />
      <!--<Label-Tag :config="labelConfigSex" />-->
    </div>
    <dv-decoration-2 class="decoration" :reverse="true" style="width:5px;" />
    <!--年龄-->
    <div class="bc-chart-item">
      <div class="bcci-header">年龄分布</div>
      <dv-active-ring-chart :config="config2" />
      <!--<Label-Tag :config="LabelConfigAge" />-->
    </div>
    <dv-decoration-2 class="decoration" :reverse="true" style="width:5px;" />
    <!--籍贯-->
    <div class="bc-chart-item">
      <div class="bcci-header">籍贯分布</div>
      <dv-active-ring-chart :config="config3" />
      <!--<Label-Tag :config="labelConfigCity" />-->
    </div>
    <dv-decoration-2 class="decoration" :reverse="true" style="width:5px;" />
    <!---->
    <div class="bc-chart-item">
      <div class="bcci-header">职业分布</div>
      <dv-active-ring-chart :config="config4" />
      <!--<Label-Tag :config="labelConfig" />-->
    </div>
  </div>
</template>

<script>
// import LabelTag from './LabelTag'

export default {
  name: 'BottomCharts',
  components: {
    // LabelTag
  },
  data () {
    return {
      config1: {
        data: [
          {
            name: '男',
            value: 6688
          },
          {
            name: '女',
            value: 5150
          }
        ],
        color: ['#00baff', '#3de7c9'],
        radius: '65%',
        activeRadius: '70%'
      },
      config2: {
        data: [
          {
            name: '20岁以下',
            value: 1161
          },
          {
            name: '20-30岁',
            value: 4981
          },
          {
            name: '30-40岁',
            value: 4234
          },
          {
            name: '40-50岁',
            value: 871
          },
          {
            name: '50岁以上',
            value: 591
          }
        ],
        color: ['#00baff', '#3de7c9', '#ff4c76', '#ffc530', '#469f4b', '#fff'],
        radius: '65%',
        activeRadius: '70%'
      },
      config3: {
        data: [
          {
            name: '扬州',
            value: 6452
          },
          {
            name: '泰州',
            value: 1512
          },
          {
            name: '天长',
            value: 1333
          },
          {
            name: '淮安',
            value: 755
          },
          {
            name: '盐城',
            value: 664
          },
          {
            name: '其他',
            value: 1122
          }
        ],
        color: ['#00baff', '#3de7c9', '#ff4c76', '#ffc530', '#469f4b', '#fff'],
        radius: '65%',
        activeRadius: '70%'
      },
      config4: {
        data: [
          {
            name: '学生',
            value: 156
          },
          {
            name: '技术工人',
            value: 415
          },
          {
            name: '销售',
            value: 90
          },
          {
            name: '其他',
            value: 210
          }
        ],
        color: ['#00baff', '#3de7c9', '#ff4c76', '#ffc530', '#469f4b', '#fff'],
        radius: '65%',
        activeRadius: '70%'
      }
    }
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 25%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 22px;
    font-weight: bold;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration1,
  .decoration2,
  .decoration3 {
    position: absolute;
    left: 0%;
  }
}
</style>
